<template>
  <a-select v-model:value="trainCode" show-search allowClear
            :filterOption="filterTrainCodeOption"
            @change="onChange" placeholder="请选择车次"
            :style="'width: ' + localWidth">
    <a-select-option v-for="item in trains" :key="item.code" :value="item.code" :label="item.code + item.start + item.end">
      {{item.code}} {{item.start}} ~ {{item.end}}
    </a-select-option>
  </a-select>
</template>

<script>

import {defineComponent, onMounted, ref, watch} from 'vue';
import axios from "axios";
import {notification} from "ant-design-vue";

export default defineComponent({
  name: "daily-train-select-view",
  props: ["trainCodeValue", "width"],
  emits: ['update:trainCodeValue', 'change'],
  setup(props, {emit}) {
    const trainCode = ref();
    const trains = ref([]);
    const localWidth = ref(props.width);
    if(Tool.isEmpty(props.width)) {
      localWidth.value = "100%";
    }

    // 利用watch，动态获取父组件的值，如果放在onMounted或其它方法里，则只有第一次有效
    watch(() => props.trainCodeValue, ()=>{
      /**
       * 父组件有一个
       * <train-select-view v-model="trainStation.trainCode"></train-select-view>
       * 已经绑定了trainCode
       * props.modelValue 是子组件接收的父组件传递的值。
       * emits 是子组件可以触发的事件，用于通知父组件数据的变化。
       *
       * v-model在不指定的情况下 默认传参的名字是modelValue
       * 我这里做了修改 指定成了trainCodeValue
       *
       * 针对一个值的情况 可以通过使用默认值modelValue
       * 对于多个值的情况 要么定义多个名字 比如width的例子 要么通过把变量封装成对象去使用
       */
      console.log("props.trainCodeValue", props.trainCodeValue);
      trainCode.value = props.trainCodeValue;
    }, {immediate: true});

    /**
     * 查询所有的车次，用于车次下拉框
     */
    const queryAllTrain = () => {
        axios.get("/business/admin/train/queryDailyAll").then((response) => {
          let data = response.data;
          if (data.success) {
            trains.value = data.content;
          } else {
            notification.error({description: data.message});
          }
        });
      };

    /**
     * 车次下拉框筛选
     */
    const filterTrainCodeOption = (input, option) => {
      console.log(input, option);
      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };

    /**
     * 将当前组件的值响应给父组件
     * @param value
     */
    const onChange = (value) => {
      emit('update:trainCodeValue', value);
      /**
       * 功能拓展 可以将子组件的事件暴露给父组件来使用
       * 有时候 父组件只知道子组件选择了G2还不够 还需要知道整条train的信息 包括始发站终点站等 可以通过change事件拿到
       * 此时查询完的所有数据都在trains中 通过过滤把数据还给父组件
       */
      let train = trains.value.filter(item => item.code === value)[0];
      if (Tool.isEmpty(train)) {
        train = {};
      }
      emit('change', train); //相当于给父组件提供了一个方法名为change 参数为train
    };

    onMounted(() => {
      queryAllTrain();
    });

    return {
      trainCode,
      trains,
      filterTrainCodeOption,
      onChange,
      localWidth
    };
  },
});
</script>
